<template>
  <div id="monitor3"> 
   
   <div class="con">
         <div class="top">
             <div class="top_item" style="flex: 1;">
                 <img class="top_img" src="@/assets/images/png1.png" />
                    挂卖详情
                   <el-form ref="form" :model="form" label-width="80px">  
                    <el-form-item label="" label-width="0px" style="margin-left:10px;margin-bottom:0px !important;">
                       <el-date-picker 
                       :picker-options="pickerOptions" @change="select_change" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.time"  style="width:150px;"></el-date-picker>
                    </el-form-item>
                 </el-form>
             </div> 
             <div class="top_item" >
                 <div class="see_but" @click="go_but()" style="margin-right:10px;">查看详情</div>
             </div>
             <div>
                 <img style="width:30px;height:30px;" src="@/assets/images/sx.png" @click="refresh_but()" />
             </div>
         </div>
         <div class="box">
              <div class="orchard" v-for="(item,index) in list_data" :key="index">
                <div class="orchard_top " :class="'orchard_top_color' + index ">
                     <div class="top1_item">
                           <img class="item_b_1_img" v-if="index == 0" src="@/assets/images/zy1.png" />
                            <img class="item_b_1_img" v-if="index == 1" src="@/assets/images/zy2.png" />
                            <img class="item_b_1_img" v-if="index == 2" src="@/assets/images/zy3.png" />
                            <img class="item_b_1_img" v-if="index == 3" src="@/assets/images/zy4.png" />
                            {{ item.title }}
                    </div> 
                    
                    <div class="zt_but">
                            <span v-if="getTime(getTime_fm()) < getTime(item.open_second_start)">预约中</span>
                            <span v-if="getTime(item.open_second_start) < getTime(getTime_fm()) &&  getTime(getTime_fm())<getTime(item.open_second_end)">开放中</span>
                            <span v-if="getTime(getTime_fm()) > getTime(item.open_second_end)">关闭中</span>
                    </div> 
                </div>
                <div class="orchard_con">
                    <div class="orchard_con1">
                        <div class="item_a">
                              <div class="item_b">
                                  <div class="item_b_1">预约人数 <img @click="mtk4_but(item.maid)"  style="width:18px;height:18px;margin-left:5px;" src="@/assets/images/wh.png" /></div>
                                  <div class="item_b_2">{{ item.appointment_number }}</div>
                              </div>
                         </div>
                         <div class="item_a" style="margin-top:20px;">
                              <div class="item_b">
                                  <div class="item_b_1">预约次数</div>
                                  <div class="item_b_2">{{ item.appointment_buy_number }}</div>
                              </div>
                         </div>
                    </div>
                    <div class="orchard_con2">
                        <div class="item_a">
                                <div class="item_b">
                                  <div class="item_b_1">实时挂卖 <img @click="mtk1_but(item.maid)"  style="width:18px;height:18px;margin-left:5px;" src="@/assets/images/wh.png" /></div>
                                <div class="item_b_2" >{{ item.now_onsale_count }}</div>
                              </div>
                         </div>
                         <div class="item_a" style="margin-top:20px;">
                           <div class="item_b">
                                  <div class="item_b_1">挂卖总数   <img  @click="mtk2_but(item.maid)" style="width:18px;height:18px;margin-left:5px;" src="@/assets/images/wh.png" />
                                  </div>
                                  <div class="item_b_2">{{ item.on_sale_count }}</div>
                              </div>
                         </div>
                    </div>
                    <div class="orchard_con3">
                        <div class="item_a" style="display:flex;">
                            <div class="item_b">
                                  <div class="item_b_1">进场人数</div>
                                  <div class="item_b_2">{{ item.browse_count }}</div>
                              </div>
                               <div class="item_b">
                                  <div class="item_b_1">抢拍人数</div>
                                  <div class="item_b_2">{{ item.go_buy_person_count }}</div>
                              </div>
                              <div class="item_b">
                                  <div class="item_b_1">抢拍次数</div>
                                  <div class="item_b_2">{{ item.go_buy_count }}</div>
                              </div>
                              <div class="item_b">
                                  <div class="item_b_1">完成次数</div>
                                  <div class="item_b_2">{{ item.finish_count }}</div>
                              </div>
                         </div>
                         <div class="item_a" style="display:flex;margin-top:20px;">
                              <div class="item_b">
                                  <div class="item_b_1">锁单次数</div>
                                  <div class="item_b_2">{{ item.lock_count }}</div>
                              </div>
                              <div class="item_b">
                                  <div class="item_b_1">流拍次数 <img  @click="mtk3_but(item.maid)" style="width:18px;height:18px;margin-left:5px;" src="@/assets/images/wh.png" /></div>
                                  <div class="item_b_2">{{ item.loss_count }}</div>
                              </div>
                              <div class="item_b">
                                  <div class="item_b_1">回收次数</div>
                                  <div class="item_b_2">{{ item.recovery_count }}</div>
                              </div>
                              <div class="item_b">
                                  <!-- <div class="item_b_1">{{ variable_name2 }}券挂卖数</div>
                                  <div class="item_b_2">{{ item.gdb_ticket_on_sale_count }}</div> -->
                              </div>
                         </div>
                    </div>
                </div>
              </div>           
         </div>
   </div>

      <el-dialog title='实时挂卖' :visible.sync="mtk1"  width="600px">
          <div style="width:100%;"> 
               <div class="item_a" style="display:flex;padding:0px 0px 40px 0px;">
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">正常地数量</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk1_form.data.normal_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">初始地数量</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk1_form.data.initial_count }}</div>
                      </div>
                       <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">{{ variable_name2 }}券数量</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk1_form.data.gdb_ticket_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">{{ variable_name2 }}券数量明日</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk1_form.data.tomorrow_gdb_ticket_count }}</div>
                      </div>
               </div>
          </div> 
      </el-dialog>
      <el-dialog title='挂卖总数' :visible.sync="mtk2"  width="600px">
          <div style="width:100%;"> 
              <div class="item_a" style="display:flex;padding:0px 0px 40px 0px;">
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">正常地数量</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk2_form.data.normal_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">初始地数量</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk2_form.data.initial_count }}</div>
                      </div>
                       <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">{{ variable_name2 }}券数量</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk2_form.data.gdb_ticket_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">{{ variable_name2 }}券数量明日</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk2_form.data.tomorrow_gdb_ticket_count }}</div>
                      </div>
               </div>
          </div>  
      </el-dialog>
      <el-dialog title='流拍次数' :visible.sync="mtk3"  width="600px">
          <div style="width:100%;"> 
             <div class="item_a" style="display:flex;margin-top:-20px;">
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">一次流拍</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk3_form.data.one }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">二次流拍</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk3_form.data.two }}</div>
                      </div>
               </div>
                <div class="item_a" style="display:flex;">
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">三次流拍</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk3_form.data.three }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1" style="justify-content: center;">四次流拍</div>
                          <div class="item_b_2" style="text-align: center;">{{ mtk3_form.data.four }}</div>
                      </div>
               </div>
          </div> 
      </el-dialog>

       <el-dialog title='预约人数' :visible.sync="mtk4"  width="700px">
            <div style="width:100%;"> 
  
             <el-table :data="mtk4_form.data_list" style="width: 100%" height="500px" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">
                 
                  <el-table-column label="时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="姓名"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="账号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="次数"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.buy_number }}</span>
                    </template>
                </el-table-column>
            </el-table> 

             <div style="margin-top:20px;text-align: center;">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :page-size="10"  
                    layout="prev, pager, next, jumper"
                    :total="count">
                </el-pagination>
            </div>

            </div> 
        </el-dialog>

</div>
</template>

<script>

export default {
   name: 'monitor3',
  data () {
    return {
       pickerOptions: { // 计费日期的约束条件
        disabledDate(time) {
            return time.getTime() < new Date('2021-02-03').getTime()
            }
      },
      list_data:'',
      my_maid:'',
      form:{
        time:''
      },
      mtk1:false, //实时挂卖
      mtk1_form:{
          data:{}
      },
      mtk2:false, //挂卖总数
      mtk2_form:{
          data:{}
      },
      mtk3:false, //流拍次数
      mtk3_form:{
          data:{}
      },
      mtk4:false, //预约人数
      mtk4_form:{  
           data_list:[]
      },
      page:1,
      count:0,

    }
  },
   components:{

  },
  created(){
     this.form.time = this.getNowDate1()
      this.list_fun()
      
  },
  mounted (){
    
  },
  methods: {
     list_fun(){
         this.post("/Control/goodsSaleList", {
             starttime:this.form.time
	        }).then(res => {
              this.list_data = res.result.splice(0,4);
              //console.log( this.list_data,"gggg")
         })
    },
    select_change(){
       this.list_fun()
    },
    refresh_but(){
        this.list_fun()
    },
    mtk1_but(maid){
         this.my_maid = maid
         this.mtk1 = true
         this.mtk1_fun()
    },
    mtk1_fun(){
          this.post("/Control/differentGoodsNumber", {
             maid:this.my_maid
	        }).then(res => {
             this.mtk1_form.data = res.result
             //console.log(this.mtk1_form.data,"fffff")
         })
    },
    mtk2_but(maid){
         this.my_maid = maid
         this.mtk2 = true
         this.mtk2_fun()
    },
    mtk2_fun(){
          this.post("/Control/differentTotalGoodsNumber", {
             maid:this.my_maid,
             starttime:this.form.time
	        }).then(res => {
             this.mtk2_form.data = res.result
             console.log(this.mtk2_form.data,"ppppp")
         })
    },
    mtk3_but(maid){
         this.my_maid = maid
         this.mtk3_fun()
         this.mtk3 = true
    },
    mtk3_fun(){
          this.post("/Control/lossNumber", {
             maid:this.my_maid,
             starttime:this.form.time
	        }).then(res => {
             this.mtk3_form.data = res.result
             //console.log(res.result,"hhhhh")
         })
    },
    mtk4_but(maid){
         this.my_maid = maid
         this.mtk4 = true
         this.mtk4_fun()
    },
    mtk4_fun(){
        this.post("/Control/appointmentAcount", {
              page:this.page,
              maid:this.my_maid,
              starttime:this.form.time
	         }).then(res => {
            this.count = res.result.count
            this.mtk4_form.data_list = res.result.list
            //console.log(this.mtk4_form.data_list,"tttt")
        })
    },
    go_but(){
      this.$router.push({
          path: '/index/operationdata/Monitor/detailsmonitor3',
          query: {
              name:'挂卖详情',
          }
      })
   },
   handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
   },
    handleCurrentChange(val) {
        this.page = val
        this.mtk4_fun()
        console.log(`当前页: ${val}`);
    }

  }
}
</script>


<style scoped>
#monitor3{
  padding:2px;
}
.con{
   padding:15px;
   border-radius: 7px;  
   /* box-shadow: rgba(116, 77, 254, 0.1) 0px 0px 7px; */
}
.top{
    display: flex;
    align-items: center;
    justify-content: center;
}
.top_item{   
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.top1_item{
   flex: 1;
   display: flex;
   align-items: center;
   font-size: 14px;
}
.top1_img{
  width:25px;
  height:25px;
  margin-right: 10px;
}
.item_a{
  display:flex;
  padding:0px 15px;
}
.item_b{
  flex: 1;
}
.item_b_1{
  font-size: 14px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.item_b_1_img{
  width:20px;
  height: 20px;
  margin-right:5px;
}
.item_b_2{
  margin-top: 10px;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}
.zt_but{
  border:1px solid white;
  border-radius:3px;
  height:25px;
  line-height:25px;
  text-align: center;
  padding:0px 10px;
  color:white;
  font-size:12px;
}
/* .box{
    padding: 10px;
    height:200px;
} */
.orchard{
  margin-top: 20px;
  box-shadow: rgba(116, 77, 254, 0.1) 0px 0px 7px;
}
.orchard:first-child{
   margin-top: 10px;
}
.orchard_top{
  height:45px;
  display: flex;
  align-items: center;
  padding:0px 10px; 
  
  border-radius: 7px 7px 0px 0px;
}
.orchard_top_color0{
  background: linear-gradient(-90deg, #7662FF, #FFFFFF);
}
.orchard_top_color1{
  background: linear-gradient(-90deg, #FFD162, #FFFFFF);
}
.orchard_top_color2{
  background: linear-gradient(-90deg, #FF626D, #FFFFFF);
}
.orchard_top_color3{
  background: linear-gradient(-90deg, #0ACD5E, #FFFFFF);
}
.orchard_con{
  padding:10px 10px;
  display: flex;
  height:250px;
}
.orchard_con1{   
    border-radius:7px;  
    background: #F0EFFF;
    width: 250px;
    height: 100%;
    padding:20px;
    box-sizing: border-box;
}
.orchard_con2{
    border-radius:7px;  
    background: #FFF8F0;
    width: 250px;
    height: 100%;
    margin-left:40px;
    padding:20px;
    box-sizing: border-box;
}
.orchard_con3{
    border-radius:7px;  
    background: #FAFFFB;
    flex:1;
    height: 100%;
    margin-left:40px;
    padding:20px;
    box-sizing: border-box;
}


.el-input--suffix>>>.el-input__inner{
  height:35px;
}

.see_but{
    width: 90px;
    height: 30px;
    background: #B3C0D1;
    border-radius: 18px;
    text-align: center;
    line-height: 30px;
    color:white;
    font-size: 14px;
    cursor: pointer;
}
</style>